<template>
	<swiper :options="swiperNotice" class="swiperNotice">
		<swiper-slide>
			<marquee ref="marquee" behavior scrollamount="5" direction>
				<div style="display: flex;align-items: center;height: 26px;">
					<img src="static/img/laba.png" alt="" style="width: 20px;margin-right: 5px;"><span v-for="(item, i) in live.notices"
					 :key="i">{{item.title}}</span>
				</div>
			</marquee>
		</swiper-slide>
	</swiper>
</template>

<script>
	import "swiper/dist/css/swiper.css";
	import {
		swiper,
		swiperSlide
	} from "vue-awesome-swiper";
	export default {
		data() {
			return {
				swiperNotice: {
					loop: true,
					direction: "vertical",
					slidesPerView: 1
				},
			};
		},
		computed: {
			live() {
				return this.$store.state.live;
			},
		},
		components: {
			swiper,
			swiperSlide
		}
	};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
	.swiperNotice {
		height: 100%;
		width: 100%;
		text-align: right;
		font-size: 14px;
		i {
			margin-right: 5px;
		}
	}
</style>
